<template>
  <ElDialog
    v-model="visible"
    title="查看通行记录"
    width="800px"
    top="4vh"
    :close-on-click-modal="true"
    @close="handleClose"
  >
    <ElSkeleton :loading="loading" animated>
      <ElDescriptions :column="2" border>
        <ElDescriptionsItem label="创建时间">
          {{ formatDateTime(form.createTime) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="更新时间">
          {{ formatDateTime(form.updateTime) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="通行时间">
          {{ formatDateTime(form.recordTime) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="用户状态">
          <ElTag :type="getUserStatusType(form.recordUserStatus)">
            {{ getUserStatusLabel(form.recordUserStatus) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="距离">
          {{ form.recordDistance }} 米
        </ElDescriptionsItem>
        <ElDescriptionsItem label="经度">
          {{ form.recordLongitude }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="纬度">
          {{ form.recordLatitude }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="详细地址" :span="2">
          {{ form.recordAddress }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="小区名称" :span="2">
          {{ form.geoArea?.areaName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="小区地址" :span="2">
          {{ form.geoArea?.areaAddress }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="用户姓名">
          {{ form.newUser?.newName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="用户手机号">
          {{ form.newUser?.newPhone }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="身份证号">
          {{ form.newUser?.newIdentity }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElSkeleton>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">关闭</ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { dayjs, ElMessage } from 'element-plus'
  import { recordUserAreaGetDataUsingPost, RecordUserAreaVo } from '@/api'

  // 类型定义
  interface Props {
    modelValue: boolean
    areaData?: RecordUserAreaVo | null
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
  }

  // Props 和 Emits
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    areaData: undefined
  })

  const emit = defineEmits<Emits>()

  // 用户状态配置
  const USER_STATUS_CONFIG: any = {
    1: { label: '绿码', type: 'success' },
    2: { label: '黄码', type: 'warning' },
    3: { label: '红码', type: 'danger' },
    4: { label: '灰码', type: 'info' }
  } as const

  const loading = ref(false)
  const form = ref<RecordUserAreaVo>({} as RecordUserAreaVo)

  // 计算属性
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })

  // 监听对话框打开，获取数据
  watch(visible, async (newVal) => {
    if (newVal && props.areaData?.id) {
      await fetchData(props.areaData.id)
    }
  })

  // 获取数据
  const fetchData = async (id: number) => {
    try {
      loading.value = true
      const res = await recordUserAreaGetDataUsingPost({ 
        body: { id } 
      })
      form.value = res || {}
    } catch (error) {
      ElMessage.error('获取通行记录详情失败')
      form.value = {} as RecordUserAreaVo
    } finally {
      loading.value = false
    }
  }

  // 格式化 YYYYMMDDHHmmss 格式的时间
  const formatDateTime = (dateTimeStr: string | undefined) => {
    if (!dateTimeStr) return ''
    // 将 YYYYMMDDHHmmss 格式转换为 YYYY-MM-DD HH:mm:ss
    const match = dateTimeStr.match(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/)
    if (match) {
      const [, year, month, day, hour, minute, second] = match
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    }
    return dateTimeStr
  }

  const getUserStatusLabel = (status: number) => {
    return USER_STATUS_CONFIG[status]?.label || '未知'
  }

  const getUserStatusType = (status: number) => {
    return USER_STATUS_CONFIG[status]?.type || 'info'
  }

  const handleClose = () => {
    visible.value = false
  }
</script>